import React from "react";

export interface FlowNode {
  nodeId: string;
  nodeLabel: string;
  status: string;
  event: string;
  data?: any;
  timestamp?: number;
}

interface ThinkingChainProps {
  nodes: FlowNode[];
}

const ThinkingChain: React.FC<ThinkingChainProps> = ({ nodes }) => {
  const [expanded, setExpanded] = React.useState(true);

  // 获取状态图标
  const getStatusIcon = (status: string) => {
    switch (status.toLowerCase()) {
      case "completed":
      case "success":
        return <span style={{ color: "#52c41a", fontSize: 14 }}>✓</span>;
      case "running":
      case "processing":
        return <span style={{ color: "#1890ff", fontSize: 14 }}>●</span>;
      case "error":
      case "failed":
        return <span style={{ color: "#ff4d4f", fontSize: 14 }}>✗</span>;
      default:
        return <span style={{ color: "#d9d9d9", fontSize: 14 }}>○</span>;
    }
  };

  // 获取状态颜色
  const getStatusColor = (status: string) => {
    switch (status.toLowerCase()) {
      case "completed":
      case "success":
        return "#52c41a";
      case "running":
      case "processing":
        return "#1890ff";
      case "error":
      case "failed":
        return "#ff4d4f";
      default:
        return "#d9d9d9";
    }
  };

  return (
    <div
      style={{
        background: "#f8f9fa",
        padding: 12,
        borderRadius: 6,
        marginBottom: 8,
      }}
    >
      <div
        style={{
          display: "flex",
          alignItems: "center",
          cursor: "pointer",
          marginBottom: expanded ? 12 : 0,
        }}
        onClick={() => setExpanded((e) => !e)}
      >
        <span style={{ fontSize: 14, fontWeight: 600, color: "#1890ff" }}>
          💭
        </span>
        <b style={{ marginLeft: 6, color: "#262626" }}>
          思维链 ({nodes.length})
        </b>
        <span style={{ marginLeft: 8, color: "#8c8c8c", fontSize: 12 }}>
          {expanded ? "收起 ▲" : "展开 ▼"}
        </span>
      </div>

      {expanded &&
        (nodes.length === 0 ? (
          <div
            style={{
              color: "#bfbfbf",
              fontStyle: "italic",
              textAlign: "center",
              padding: "12px 0",
            }}
          >
            暂无思维节点
          </div>
        ) : (
          <div style={{ position: "relative" }}>
            {/* 连接线 */}
            {nodes.length > 1 && (
              <div
                style={{
                  position: "absolute",
                  left: 10,
                  top: 20,
                  bottom: 20,
                  width: 2,
                  background: "linear-gradient(to bottom, #e6f7ff, #d9d9d9)",
                  borderRadius: 1,
                }}
              />
            )}

            {nodes.map((node, index) => (
              <div
                key={`${node.nodeId}_${index}`}
                style={{
                  display: "flex",
                  alignItems: "flex-start",
                  marginBottom: index === nodes.length - 1 ? 0 : 12,
                  position: "relative",
                  zIndex: 1,
                }}
              >
                {/* 状态指示器 */}
                <div
                  style={{
                    display: "flex",
                    alignItems: "center",
                    justifyContent: "center",
                    width: 20,
                    height: 20,
                    background: "#fff",
                    border: `2px solid ${getStatusColor(node.status)}`,
                    borderRadius: "50%",
                    marginRight: 12,
                    flexShrink: 0,
                  }}
                >
                  {getStatusIcon(node.status)}
                </div>

                {/* 节点内容 */}
                <div
                  style={{
                    flex: 1,
                    background: "#fff",
                    padding: "8px 12px",
                    borderRadius: 6,
                    border: "1px solid #f0f0f0",
                    boxShadow: "0 1px 2px rgba(0,0,0,0.04)",
                    position: "relative",
                  }}
                >
                  {/* 小三角 */}
                  <div
                    style={{
                      position: "absolute",
                      left: -6,
                      top: 12,
                      width: 0,
                      height: 0,
                      borderTop: "6px solid transparent",
                      borderBottom: "6px solid transparent",
                      borderRight: "6px solid #fff",
                    }}
                  />

                  <div
                    style={{
                      fontSize: 13,
                      color: "#262626",
                      lineHeight: 1.4,
                      fontWeight: 500,
                    }}
                  >
                    {node.nodeLabel}
                  </div>

                  {/* 步骤编号 */}
                  <div
                    style={{
                      position: "absolute",
                      top: -8,
                      right: 8,
                      background: getStatusColor(node.status),
                      color: "#fff",
                      fontSize: 10,
                      padding: "2px 6px",
                      borderRadius: 8,
                      fontWeight: 600,
                    }}
                  >
                    {index + 1}
                  </div>
                </div>
              </div>
            ))}
          </div>
        ))}
    </div>
  );
};

export default ThinkingChain;
